<!DOCTYPE html>
<html lang="en">
	<head>
		<title>菜单管理</title>
		<#include "../../inc/header.ftl"/>
	</head>

	<body class="no-skin">

		<div class="main-container ace-save-state" id="main-container">

			<div class="main-content">
				<div class="main-content-inner">

					<div class="page-content">
						<div class="row">
							<div class="col-xs-12">
								<table id="MainGrid"></table>
								<div id="toolbar">
									<div style="padding:8px 8px 4px">
										<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="javascript:addInfo()">增加</a>
										<a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="javascript:editInfo()">修改</a>
										<a href="#" class="easyui-linkbutton" iconCls="icon-cut" onclick="javascript:delInfo()">删除</a>
									</div>
								</div>
							</div>
						</div><!-- /.row -->
					</div><!-- /.page-content -->

					<div id="box-add" class="ui-dialog-content hide">
						<form class="form-horizontal" id="form-add" method="post">
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="menuCode">菜单编号</label>

								<div class="col-xs-12 col-sm-4">
									<div class="clearfix">
										<input type="text" name="menuId" id="menuId" class="col-xs-12 easyui-textbox" data-options="required:true" style="width:100%" />
									</div>
								</div>
								<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="menuName">菜单名称</label>

								<div class="col-xs-12 col-sm-4">
									<div class="clearfix">
										<input type="text" name="menuName" id="menuName" class="col-xs-12 easyui-textbox" data-options="required:true" style="width:100%" />
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="menuPcode">上级菜单</label>

								<div class="col-xs-12 col-sm-4">
									<div class="clearfix">
										<input type="text" name="parentId" id="parentId" class="col-xs-12 easyui-combotree" data-options="required:true" style="width:100%" />
									</div>
								</div>
								<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="showOrder">显示顺序</label>

								<div class="col-xs-12 col-sm-4">
									<div class="clearfix">
										<input type="text" name="orderBy" id="orderBy" class="easyui-numberbox" data-options="min:0" style="width: 80px" />
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="url">地址</label>

								<div class="col-xs-12 col-sm-10">
									<div class="clearfix">
										<input type="text" name="url" id="url" class="col-xs-12" />
									</div>
								</div>
							</div>
						</form>
					</div><!-- #dialog-confirm -->
				</div>
			</div><!-- /.main-content -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->

		<!-- basic scripts -->
		<#include "../../inc/basicjs.ftl"/>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">

			jQuery(function($) {

				// 右侧表格
				$('#MainGrid').treegrid({
					url: prefix + '/sys/menu/listMenu',
					method: 'get',
					striped: true,
					singleSelect: true,
					loadMsg: "正在努力加载数据，请稍后...",
					idField:'menuId',
					treeField:'menuName',
					columns:[[
						{title:'菜单编号',field:'menuId',width:100},
						{title:'菜单名称',field:'menuName',width:200},
						{title:'显示顺序',field:'orderBy', width:100},
						{title:'地址',field:'url', width:600}
					]],
					toolbar: '#toolbar',
					onLoadSuccess: function(row, data){
						$('#MainGrid').treegrid('collapseAll');
					}
				});

				$(window).resize(function() {
					$('#MainGrid').datagrid('resize');
				});

			});

			function saveInfo(opt) {
				var url = (opt == 1) ? '/sys/menu/addMenu' : '/sys/menu/saveMenu';
				$('#form-add').form({
					url: prefix + url,
					onSubmit:function(){
						var isValid = $(this).form('validate');
						if (isValid){
							$.messager.progress({
								title: '提示',
								msg: '数据处理中，请稍候……',
								text: ''
							});
						}
						return isValid;
					},
					success:function(data) {
						$.messager.progress('close');
						var data = eval('(' + data + ')');
						if (data.success) {
							searchInfo();
							$('#box-add').dialog('close');
						} else {
							$.messager.alert('提示', data.msg, 'info');
						}
					}
				});
				$('#form-add').submit();
			}
			function searchInfo() {
				$('#MainGrid').treegrid('load',{});
			}
			function addInfo() {
				$('#form-add').form('clear');
				$('#orderBy').numberbox('setValue', 10);
				getParentTree();
				showForm(1);
			}
			function editInfo() {
				var row = $('#MainGrid').datagrid('getSelected');
				if (row == null) {
					$.messager.alert('提示', '请选择要编辑的数据', 'info');
					return;
				}
				$.ajax({
					url: prefix + '/sys/menu/getMenu',
					type: 'POST',
					data: {menuId: row.menuId},
					dataType: 'json',
					success:function(data){
						if(data.success) {
							getParentTree();
							$('#form-add').form('load',data.data);
							showForm(2);
						}else {
							$.messager.alert('提示', data.msg, 'info');
						}
					}
				});
			}
			function showForm(opt) {
				$("#menuId").textbox('readonly', (opt == 2));
				var tit = (opt == 1) ? '添加角色' : '编辑角色';
				$( "#box-add" ).removeClass('hide').dialog({
					title: '&nbsp;' + tit,
					iconCls:'icon-add',
					width: 600,
					height: 400,
					modal: true,
					buttons:[{
						text:'保存',
						iconCls:'icon-ok',
						width:80,
						plain:false,
						handler:function(){
							saveInfo(opt);
						}
					},{
						text:'取消',
						iconCls:'icon-cancel',
						width:80,
						plain:false,
						handler:function(){$('#box-add').dialog('close')}
					}]
				});
			}
			function delInfo() {
				var row = $('#MainGrid').datagrid('getSelected');
				if (row == null) {
					$.messager.alert('提示', '请选择要删除的数据', 'info');
					return;
				}
				$.messager.confirm('提示', '确定要删除菜单[' + row.menuId + ']吗？', function(r){
					if (r) {
						$.ajax({
							url: prefix + '/sys/menu/deleteMenu',
							type: 'POST',
							data: {menuId: row.menuId},
							dataType: 'json',
							success:function(data){
								if(data.success) {
									searchInfo();
								}else {
									$.messager.alert('提示', data.msg, 'info');
								}
							}
						});
					}
				});
			}

			function getParentTree() {
				var data = $('#MainGrid').treegrid('getData');
				// 下拉框
				$('#parentId').combotree('loadData', [{id: '0', text: '顶级菜单', children: chgTreeData(data)}]);
			}

			function chgTreeData(data) {
				var chd = [];
				for (var i=0;i<data.length;i++) {
					var node = {id: data[i]['menuId'], text: data[i]['menuName']};
					var sub = data[i]['children'];
					if (sub !== undefined) node['children'] = chgTreeData(sub);
					chd.push(node);
				}
				return chd;
			}

		</script>
	</body>
</html>
